import { Layout, Button, Typography, Divider, Input, DatePicker, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useState } from 'react';
// import { orderManagement } from '../../../../apis/auth'
import PropTypes from 'prop-types';
const { RangePicker } = DatePicker;
const { Header } = Layout;
const { Title, Text } = Typography;

const OrderManagement2 = ({ setFilterConditions }) => {
    const [orderId, setOrderId] = useState('');
    const [phone, setPhone] = useState('');
    const [dates, setDates] = useState([]);
    // const [isSearching, setIsSearching] = useState(false);

    const handleSearch = () => {
        const [beginTime, endTime] = dates.length ? dates.map(date => date.format('YYYY-MM-DD HH:mm:ss')) : [null, null];
        setFilterConditions({ orderId, phone, beginTime, endTime });
        // setIsSearching(true);
        
    };

    return (
        <div>
            <Layout>
                <Header style={{
                    background: '#fff',
                    padding: '10px',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'flex-start',
                    height: 'auto'
                }}>
                    <Divider style={{ margin: '1px 0', width: '100%' }} />
                    <Title level={4} style={{ marginBottom: '0.5em', fontSize: '16px' }}>订单管理</Title>
                    <Text style={{ fontSize: '12px', marginBottom: '8px' }}>
                        展示订单信息，查询订单，查看订单状态，处理订单的发货，确认送达和同意退款
                    </Text>
                    <div style={{ marginLeft: 'auto' }}>
                        <Button>待发货</Button>
                        <Button>配送中</Button>
                        <Button>已成交</Button>
                        <Button>待退款</Button>
                        <Button>已退款</Button>
                    </div>
                    <Divider style={{ margin: '8px 0', width: '100%' }} />
                    <div className="filter">
                        订单号： <Input value={orderId} onChange={(e) => setOrderId(e.target.value)} style={{ width: 200, marginRight: 16 }} />
                        用户电话：<Input value={phone} onChange={(e) => setPhone(e.target.value)} style={{ width: 200, marginRight: 16 }} />
                        时间：<Space direction="vertical" size={12}>
                            <RangePicker showTime onChange={(dates) => setDates(dates)} />
                        </Space>
                        <Button type="primary" shape="circle" icon={<SearchOutlined />} onClick={handleSearch} style={{ marginRight: 16, marginLeft: 36 }}></Button>
                    </div>
                </Header>
            </Layout>
        </div>
    );
};

OrderManagement2.propTypes = {
    setFilterConditions: PropTypes.func.isRequired,
};

export default OrderManagement2;
